
<!--
 * @Description:
 * @Author: LZX
 * @Date: 2021-10-21 16:56:19
 * @LastEditors: LZX
 * @LastEditTime: 2021-10-29 09:30:42
-->
<template>
  <div class="dashboard-container">
    <div class="dashboard-one">
      <div>
        <div class="title">访问量</div>
        <div class="dashboard-one-content">
          <hr />
          <div class="mid"><b>25,848</b><br />日同比 12.5% 周同比 5%</div>
          <hr />
          <div class="visiters">
            <div class="left">总访问量</div>
            <div class="right">280万</div>
          </div>
        </div>
      </div>
      <div>
        <div class="title">销售量</div>
        <div class="dashboard-one-content">
          <hr />
          <div class="mid">
            <b>￥12,000</b><br /><progress value="7" max="10"></progress>
          </div>
          <hr />
          <div class="visiters">
            <div class="left">总销售量</div>
            <div class="right">80万</div>
          </div>
        </div>
      </div>
      <div>
        <div class="title">订单量</div>
        <div class="dashboard-one-content">
          <hr />
          <div class="mid">
            <b>25,848</b><br /><progress value="6" max="10"></progress>
          </div>
          <hr />
          <div class="visiters">
            <div class="left">转化率</div>
            <div class="right">60%</div>
          </div>
        </div>
      </div>
      <div>
        <div class="title">用户</div>
        <div class="dashboard-one-content">
          <hr />
          <div class="mid"><b>128位</b><br />日同比 12.5% 周同比 5%</div>
          <hr />
          <div class="visiters">
            <div class="left">总用户</div>
            <div class="right">10800人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-two">
      <div
        @mouseover="select(1)"
        :class="{ chosen: BeChosen == 1 }"
        @mouseleave="select(0)"
      >
        <img
          src="	http://81.69.24.232/briup-ej-ui/static/img/%E7%94%A8%E6%88%B7.8b84d5ac.png"
          alt=""
        />
        <div>用户</div>
      </div>
      <div
        @mouseover="select(2)"
        :class="{ chosen: BeChosen == 2 }"
        @mouseleave="select(0)"
      >
        <img
          src="	"
          alt=""
        />
        <div>分析</div>
      </div>
      <div
        @mouseover="select(3)"
        :class="{ chosen: BeChosen == 3 }"
        @mouseleave="select(0)"
      >
        <img
          src="	http://81.69.24.232/briup-ej-ui/static/img/%E6%A0%87%E7%AD%BE.323f5808.png"
          alt=""
        />
        <div>标签</div>
      </div>
      <div
        @mouseover="select(4)"
        :class="{ chosen: BeChosen == 4 }"
        @mouseleave="select(0)"
      >
        <img
          src="	"
          alt=""
        />
        <div>消息</div>
      </div>
      <div
        @mouseover="select(5)"
        :class="{ chosen: BeChosen == 5 }"
        @mouseleave="select(0)"
      >
        <img
          src="	http://81.69.24.232/briup-ej-ui/static/img/%E7%94%A8%E6%88%B7.8b84d5ac.png"
          alt=""
        />
        <div>票据</div>
      </div>
      <div
        @mouseover="select(6)"
        :class="{ chosen: BeChosen == 6 }"
        @mouseleave="select(0)"
      >
        <img
          src="	http://81.69.24.232/briup-ej-ui/static/img/%E7%94%A8%E6%88%B7.8b84d5ac.png"
          alt=""
        />
        <div>订单</div>
      </div>
      <div
        @mouseover="select(7)"
        :class="{ chosen: BeChosen == 7 }"
        @mouseleave="select(0)"
      >
        <img
          src="	http://81.69.24.232/briup-ej-ui/static/img/%E7%94%A8%E6%88%B7.8b84d5ac.png"
          alt=""
        />
        <div>产品</div>
      </div>
      <div
        @mouseover="select(8)"
        :class="{ chosen: BeChosen == 8 }"
        @mouseleave="select(0)"
      >
        <img
          src="	http://81.69.24.232/briup-ej-ui/static/img/%E9%85%8D%E7%BD%AE.c55edc33.png"
          alt=""
        />
        <div>配置</div>
      </div>
    </div>
    <div class="dashboard-three">
      <div class="title">订单量</div>
      <hr />
      <div id="container" style="min-width: 400px; height: 400px"></div>
    </div>
    <div class="dashboard-four"></div>
  </div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  data() {
    return {
      BeChosen: 0,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    select(i) {
      this.BeChosen = i;
    },
    creatCharts() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = Highcharts.chart("container", {
        chart: {
          type: "column",
        },
        title: {
          text: "订单趋势",
        },
        xAxis: {
          categories: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
          ],
          crosshair: true,
        },
        yAxis: {
          min: 0,
          title: {
            text: "",
          },
        },
        tooltip: {
          // head + 每个 point + footer 拼接成完整的 table
          headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}单</b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "订单",
            data: [38, 52, 61, 145, 48, 38, 38, 38],
          },
        ],
      });
    },
  },
  mounted() {
    this.creatCharts();
  },
};
</script>


<style lang="scss" scoped>
.dashboard {
  &-container {
    padding: 5px;
    background-color: #F5F7F9;
  }
  &-one {
    display: flex;
    justify-content: space-between;
    > div {
      width: 310px;
      height: 200px;
      background-color: white;
      hr {
        opacity: 0.3;
      }
      .title {
        padding: 14px 16px;
      }
      .mid {
        padding: 0 10px;
        line-height: 30px;
        font-size: 12px;
        b {
          font-size: 30px;
          font-weight: 500;
          color: gray;
        }
        progress {
          width: 80%;
          height: 20px;
        }
      }
      .visiters {
        font-size: 14px;
        padding: 14px 10px;
        .left {
          float: left;
        }
        .right {
          float: right;
        }
      }
    }
  }
  &-two {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    > div {
      width: 100px;
      height: 100px;
      background-color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 30px;
        height: 30px;
        margin-bottom: 15px;
      }
    }
    .chosen {
      box-shadow: 1px 1px 10px gray;
    }
  }
  &-three {
    margin-top: 15px;
    width: 1400px;
    height: 400px;
    background-color: white;
    .title {
      padding: 0 20px;
      line-height: 48px;
    }
    hr {
      opacity: 0.3;
    }
  }
}
</style>
